<template>
  <div class="market">
    <header-yellow></header-yellow>
    <!-- 主要内容 -->
    <div class="main" :class="{'active': allActiveBol || sortActiveBol}">
      <ul class="leftTab">
        <!-- 左边菜单栏 -->
        <li class="leftTab_item" v-for="(item, index) in getClassifys" :key="item.classify_id" @click="changeItem(item.classify_id)">
          <span v-show="changeItemIndex" :class="{'active': changeItemIndex === item.classify_id}"></span>
          <p>{{item.classify_title}}</p>
        </li>
        <!-- 头部分类和排序 -->
        <div class="productList" @click="hideProductList()">
          <div class="allItem" @click.stop="changeAllActiveBol">
            <span>全部分类</span> 
            <img src="./images/icon-down.png"  :class="{'active': allActiveBol}">
          </div>
          <div class="sort" @click.stop="changeSortActiveBol">
            <span>综合排序</span> 
            <img src="./images/icon-down.png" :class="{'active': sortActiveBol}">
          </div>
          <!-- 全部分类 -->
          <div class="filter-items" v-show="allActiveBol">
            <ul>
              <li :class="{'active': allActiveIndex === 'all'}" @click="changeCids('all')">全部分类</li>
              <li v-for="(item, index) in getProducts.cids" :key="item.name" :class="{'active': allActiveIndex === index}" @click="changeCids(index)">{{item.name}}</li>
            </ul>
            <div class="hideProduct"></div>
          </div>
          <!-- 综合排序 -->
          <div class="filter-items" v-show="sortActiveBol">
            <ul>
              <li v-for="(item, index) in rankingList" :key="item" :class="{'active': activeRankingIndex === index}" @click="changeRankingIndex(index)">{{item}}</li>
            </ul>
            <div class="hideProduct"></div>
          </div>
        </div>
        <!-- 商品信息 -->
        <ul class="products">
          <li class="products_item" v-for="(pro, ind) in filterGetProducts" :key="pro.product_id">
            <router-link :to="'/product-item/' + pro.product_id">
              <img v-lazy="pro.imgs.small" :ref="'item'+ind">
            </router-link>
            <div class="products_content">
              <p>{{pro.title}}</p>
              <p>{{pro.unit}}ml</p>
              <p>￥{{pro.price}}</p>
            </div>
            <div class="addProduct" @click.stop="addNum(pro, ind)">+</div>
            <div class="count">{{pro.num}}</div>
            <div class="subProduct" @click.stop="subNum(pro, ind)">-</div>
          </li>
        </ul>
      </ul>
    </div>
  </div>
</template>
<script>
import HeaderYellow from '@/components/header-yellow/Header-yellow'

function orderBy (arr, type, bol) {
  if (bol === undefined) {
    bol = true
  }
  function sortNumber (a, b) {
    if (bol) {
      if (type) {
        return a[type] - b[type]
      } else {
        return a - b
      }
    } else {
      if (type) {
        return b[type] - a[type]
      } else {
        return b - a
      }
    }
  }
  return arr.sort(sortNumber)
}
export default {
  created () {
    let cartPos = this.$store.state.cartPos
    this.cartPos = cartPos
  },
  data () {
    return {
      //激活的分类下标
      changeItemIndex: 1,
      //全部分类的bol值
      allActiveBol: false,
      //激活的分类下标
      allActiveIndex: 'all',
      //激活排序的bol值
      sortActiveBol: false,
      // 默认的排序方式
      rankingList: ['综合排序', '价格最低', '价格最高'],
      //激活排序的下标
      activeRankingIndex: 0,
      cartPos: {}
    }
  },
  methods: {
    subNum (item, index) {
      if (item.num > 0 && this.userInfo.id) {
        this.$store.dispatch('subNum', item)
        if (item.num <= 1) {
          item.num = 0
        }
        // tabBar中的购物车按钮动画
        this.$store.dispatch('changeCartActive')
      }
    },
    // 将数据添加到购物车
    addNum (item, index) {
      if (this.userInfo.id) {
        // 只是原始分类数据
        if (item.num < 1) {
          item.num++
        }
        this.$store.dispatch('addNum', item)

        // 获取点击对象
        // console.log(this.$refs['item' + index])
        let imgObj = this.$refs['item' + index][0]
        let pos = imgObj.getBoundingClientRect()
        let cartPos = this.cartPos
        this.$addCart({
          src: item.imgs.small,
          width: pos.width,
          height: pos.height,
          start: {
            left: pos.left,
            top: pos.top
          },
          end: {
            left: cartPos.left,
            top: cartPos.top
          }
        })
        // tabBar中的购物车按钮动画
        this.$store.dispatch('changeCartActive')
      } else {
        this.$msg('提示', '未登录')
          .then(res => {
            this.$router.push('/login')
          })
      }
    },
    //激活的分类方法
    changeItem (index) {
      this.changeItemIndex = index
      this.allActiveBol = false
      this.sortActiveBol = false
    },
    //全部分类下拉栏
    changeCids (index) {
      this.allActiveIndex = index
    },
    //改变全部分类的bol值
    changeAllActiveBol () {
      this.allActiveBol = !this.allActiveBol
      this.sortActiveBol = false
    },
    //改变排序的下标值
    changeRankingIndex (index) {
      this.activeRankingIndex = index
    },
    //改变排序的bol值
    changeSortActiveBol () {
      this.sortActiveBol = !this.sortActiveBol
      this.allActiveBol = false
    },
    //隐藏幕板
    hideProductList () {
      this.sortActiveBol = false
      this.allActiveBol = false
    }
  },
  components: {
    HeaderYellow
  },
  computed: {
    // 获取用户信息
    userInfo () {
      return this.$store.state.userInfo
    },
    //获取分类数据
    getClassifys () {
      // console.log(this.$store.state.classifys)
      return this.$store.state.classifys
    },
    //筛选商品信息
    getProducts () {
      for (let i = 0; i < this.getClassifys.length; i++) {
        if (this.changeItemIndex === this.getClassifys[i].classify_id) {
          return this.getClassifys[i]
        }
      }
      return {}
    },
    //筛选分类和排序数据
    filterGetProducts () {
      // 当前激活的所有商品数据
      let products = this.getProducts.products
      if (this.allActiveIndex !== 'all') {
        products = products.filter(item => item.cids === this.allActiveIndex)
      }
      switch (this.activeRankingIndex) {
        case 1:
          products = orderBy(products, 'price', true)
          break
        case 2:
          products = orderBy(products, 'price', false)
          break
      }
      return products
    }
  }
}
</script>
<style scoped>
.market{
  width: 100%;
  height: 100%;
}
.main{
  width: 100%;
  position: absolute;
  top: 4.5rem;
  left: 0;
  right: 0;
  bottom: 4.9rem;
  background-color: #efefef;
  overflow-y: scroll;
}
.main.active{
  overflow: hidden;
}
/* 左边菜单栏 */
.leftTab{
  width: 30%;
}
.leftTab_item{
  width: 100%;
  height: 5rem;
  text-align: center;
  line-height: 5rem;
  border-bottom: 0.1rem solid rgb(224,224,224);
  color: rgb(109,109,109);
}
.leftTab_item > span.active {
  border-left: 0.6rem solid rgb(255,214,0);
  height: 4rem;
  float: left;
  margin-top: 0.5rem;
}
/* 头部分类和综合排序 */
.allItem {
  width: 35%;
  height: 5rem;
  position: absolute;
  top: 0;
  left: 30%;
  text-align: center;
  line-height: 5rem;
  border-bottom: 0.1rem solid rgb(224,224,224);
}
.allItem::after{
  content: '';
  width: 2rem;
  height: 3rem;
  position: absolute;
  top: 1rem;
  border-right: 0.1rem solid rgb(224,224,224);
}
.sort {
  width: 35%;
  height: 5rem;
  position: absolute;
  top: 0;
  left: 65%;
  text-align: center;
  line-height: 5rem;
  border-bottom: 0.1rem solid rgb(224,224,224);
}
.productList > div > img{
  width: 15%;
  height: 15%;
  transition: all 0.5s;
}
.allItem > img.active{
  transform: rotate(-180deg);
}
.sort > img.active{
  transform: rotate(-180deg);
}

/* 商品信息 */
.products{
  width: 70%;
  position: absolute;
  top: 5rem;
  left: 30%;
}
.products_item{
  width: 100%;
  height: 10rem;
}
.products_item img{
  width: 40%;
  height: 80%;
  float: left;
}
.products_item  img[lazy=loading] {
  width: 40%;
  height: 80%;
  background: url('../../common/images/loading.gif') no-repeat center center;
  background-size: 15% 25%;
}
.products_item>.products_content{
  width: 30%;
  height: 100%;
  float: left;
}
.products_item>.products_content>p{
  margin-top: 1rem;
}
.products_item>.products_content>p:nth-of-type(2){
  margin-top: 3rem;
  color: rgb(109,109,109);
}
.products_item>.products_content>p:nth-of-type(3){
  color: rgb(255, 67, 0);
}
.products_item>.addProduct{
  width: 2rem;
  height: 2rem;
  border: 1px solid rgb(159, 159, 159);
  border-radius: 50%;
  color: rgb(255, 67, 0);
  font-size: 3rem;
  text-align: center;
  line-height: 2rem;
  position: absolute;
  left: 85%;
  margin-top: 20%;
}
.products_item>.subProduct{
  width: 2rem;
  height: 2rem;
  border: 1px solid rgb(159, 159, 159);
  border-radius: 50%;
  color: rgb(255, 67, 0);
  font-size: 3rem;
  text-align: center;
  line-height: 2rem;
  position: absolute;
  left: 60%;
  margin-top: 20%;
}
.count{
 position: absolute;
 left: 76%;
 margin-top: 22%;
 font-size: 1.8rem;
}
/* 全部分类 */
.filter-items{
  position: absolute;
  z-index: 2;
  top: 5rem;
  right: 0;
  width: 70%;
  height: 6rem;
  background-color: white;
}
.filter-items li{
  border-radius: 0.3rem;
  border: 0.1rem solid rgb(159, 159, 159);
  float: left;
  width: 6.5rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  margin-left: 1rem;
  margin-top: 0.5rem;
}
.filter-items li.active{
  background-color: rgb(255,245,217);
  border: 0.1rem solid rgb(255, 214, 0);
}
.hideProduct{
  position: fixed;
  top: 15.5rem;
  right: 0;
  width: 70%;
  height: 27rem;
  background-color: rgba(0,0,0,0.2);
}
</style>

